.red{
    background-color: #c02c38;
    border-radius: 50%;
}
.red ul{
    position: relative;
    width: 100%;
    height: 100%;
}
.red li{
    content: "";
    width: 80%;
    height: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #ffffff;

}
.red li:nth-child(2){
    content: "";
    width: 60%;
    height: 60%;
    background-color: #c02c38;
    z-index: 1;
    box-shadow: 1px 1px 5px;
}
.red li:nth-child(3){
    content: "";
    width: 40%;
    height: 40%;
    background-color: #ffffff;
    z-index: 1;
}

.red li:nth-child(4){
    content: "";
    width: 20%;
    height: 20%;
    background-color: #c02c38;
    z-index: 1;
    box-shadow: 1px 1px 5px;
}

.green {
    background-color: #37af65;
    border-radius: 50%;
}
.green ul{
    position: relative;
    width: 100%;
    height: 100%;
}
.green li{
    content: "";
    width: 80%;
    height: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 1px 1px 5px;
}
.green li:nth-child(2){
    content: "";
    width: 60%;
    height: 60%;
    background-color: #37af65;
    z-index: 1;
}
.green li:nth-child(3){
    content: "";
    width: 40%;
    height: 40%;
    background-color: #ffffff;
    z-index: 1;
}

.green li:nth-child(4){
    content: "";
    width: 20%;
    height: 20%;
    background-color: #37af65;
    z-index: 1;
}

.blue {
    background-color: #246abf;
    border-radius: 50%;
}
.blue ul{
    position: relative;
    width: 100%;
    height: 100%;
}
.blue li{
    content: "";
    width: 80%;
    height: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 1px 1px 5px;
}
.blue li:nth-child(2){
    content: "";
    width: 60%;
    height: 60%;
    background-color: #246abf;
    z-index: 1;
}
.blue li:nth-child(3){
    content: "";
    width: 40%;
    height: 40%;
    background-color: #ffffff;
    z-index: 1;
}

.blue li:nth-child(4){
    content: "";
    width: 20%;
    height: 20%;
    background-color: #246abf;
    z-index: 1;
}